<template>
    <div class="login-wrap">
        <div class="login">
            <h2 class="logo">
                老王商城后台管理系统
            </h2>
            <el-divider></el-divider>
            <el-form ref="loginForm" :model="loginParams" :rules="rules" label-width="80px" >
                <el-form-item label="账号" prop="adminname">
                    <el-input v-model="loginParams.adminname" placeholder="管理员名称"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginParams.password" type="password" placeholder="管理员密码" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitHandler">提交</el-button>
                    <el-button type="primary" @click="resetHandler">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

import axios from "@/utils/request";
import {ElMessage} from "element-plus";


export default {
    name: "LoginView",
    data() {
        return {
            loginParams: {
                adminname: "admin",
                password: "123123"
            },
            rules:{
                adminname:[{required:true,message:"请输入管理员账号",trigger:"blur"}],
                password:[{required:true,message:"请输入管理员密码",trigger:"blur"}],
            }
        }
        
    },              
    methods:{
        submitHandler(){
            // 接收回调函数
            // this.$refs.loginForm.validate((bool)=>{
            //     if(bool){
            //         console.log("校验成功",bool);
            //     }
            // });

            this.$refs.loginForm.validate().then(()=>{


                /* axios.post("/admin/login",this.loginParams,{
                }).then(responseOption => {
                    if(responseOption.status == 200){
                        return responseOption.data;
                    }
                }).then(result=>{
                    console.log("登录成功",result);
                    // let {code,message} = result;
                    // if(code == "200"){
                    //     this.$router.push("/");
                    // }else{
                    //     ElMessage({
                    //         message:message,
                    //     })
                    // }
                }) */

                // 请求配置都是直接书写在各自页面内,后期维护不方便
                axios.post("/admin/login",this.loginParams,{
                }).then((result)=>{
                    console.log("登录成功",result);
                    ElMessage({
                        message:"登录成功",
                        type:"success",
                    })
                }).catch(err=>{ 
                    console.log("登录失败",err);
                    ElMessage({
                        type:"error",
                        message:err.message,
                    })
                })




            }).catch(err=>{
                console.log("校验失败",err);
            })
        },
        resetHandler(){
            this.$refs.loginForm.resetFields();
        },
    }
   
}
</script>

<style lang="scss" scoped>
    .login-wrap{
        width: 100%;
        height: 100%;
        background:url(https://cas.1000phone.net/cas/images/login/bg.png) no-repeat center center / cover;
    }
    .logo{
        text-align: center;
        line-height: 60px;
    }
    .login{
        width: 400px;
        padding: 20px;
        border-radius: 10px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%, -50%);
    }

</style>